<script setup>
import {reactive, ref, watch} from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({
      id: "",
      name: "",
      keyName: "",
      content: "",
      remark: "",
      createTime: ""
    })
  }
})

const rules = reactive({
  name: [
    {required: true, message: '名称不能为空', trigger: 'blur'}
  ],
  keyName: [
    {required: true, message: 'Key不能为空', trigger: 'blur'}
  ],
  content: [
    {required: true, message: '内容不能为空', trigger: 'blur'}
  ]
})

const emit = defineEmits(["update:visible", 'confirm'])

const isVisible = ref(false)
watch(() => props.visible, (newValue) => {
  isVisible.value = newValue
})

const config = ref({
  id: "",
  name: "",
  keyName: "",
  content: "",
  remark: "",
  createTime: ""
})
watch(() => props.data, (newValue) => {
  config.value = {...newValue}
})


const formRef = ref(null)

const handleDialogClose = () => {
  formRef.value.clearValidate()
  emit('update:visible', false)
}

const onDialogCancel = () => {
  emit('update:visible', false)
}

const onConfirmDialog = () => {
  if (!formRef.value) return
  formRef.value.validate(valid => {
    if (valid) {
      emit('confirm', config.value)
    }
  })
}
</script>

<template>
<el-dialog v-model="isVisible" @close="handleDialogClose" :title="config.id ? '编辑' : '新增'" width="450px" :close-on-click-modal="false">
  <el-form :model="config" ref="formRef" :rules="rules" label-width="68px">
    <el-form-item prop="name" label="名称">
      <el-input v-model="config.name" placeholder="请输入配置名称" maxlength="32" />
    </el-form-item>
    <el-form-item prop="keyName" label="键名">
      <el-input v-model="config.keyName" placeholder="请输入配置键名" maxlength="125" />
    </el-form-item>
    <el-form-item prop="content" label="内容">
      <el-input type="textarea" v-model="config.content" placeholder="请输入配置内容" maxlength="500" show-word-limit />
    </el-form-item>
    <el-form-item prop="remark" label="备注">
      <el-input type="textarea" maxlength="500" :rows="6" show-word-limit v-model="config.remark" placeholder="请输入备注信息" />
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="onDialogCancel">取消</el-button>
    <el-button type="primary" @click="onConfirmDialog">确认</el-button>
  </template>
</el-dialog>
</template>

<style scoped lang="scss">

</style>